Rules Manager for WPF | ComponentOne
In This Topic
    Quick Start
    In This Topic

    This quick start guide outlines the steps for integrating Rules Manager with the FlexGrid control and applying conditional formatting to the grid data.

    Users can achieve the desired output either through the design view or code view.

    Prerequisites

    NuGet Packages

    Create a New Project

    1. Open Visual Studio and create a new WPF application
    2. Open the NuGet Package Manager

    Tools > NuGet Package Manager > Manage NuGet Packages for Solution.

    1. Search C1.WPF.Grid, C1.WPF.RulesManager and C1.WPF.ConditionalFormatting  and install the packages

     Add FlexGrid and Rules Manager

    1. Search Flexgrid, C1Expander and C1RulesManager from the Toolbox
    2. Drag and drop the FlexGrid, C1Expander and C1RulesManager onto the form
    3. Bind data to FlexGrid. (link from flexgrid quickstart section

    Integration of Rules Manager and FlexGrid can be done through either designer or code.

    Integrate in Designer

    1. Click the smart tag of FlexGrid and click Add Behavior
    2. Select Conditional Formatting Behavior from the drop-down menu and click Add Behavior
    1. Right click on the form and select properties from the context menu

    1. Click on the <c1:ConditionalFormattingBehavior/> code to view rules engine from the properties window
    2. Click on the New button to add C1RulesEngine

            
    3. Click on the ellipsis in the properties window of C1RulesEngine to open the Rules Collection Editor

             
    4. Select any rule from the Rules Collection Editor window and click Add        
    5. Edit the rules in the properties window of the Rules Collection Editor
    6. Click OK to add the rules. In the example below, color scale rule and data bar rule has been added through the Rules Collection Editor, hence it gets reflected on the code

    Integrate through Code

    1. Define the Interaction.Behaviors tag using the following code. This applies conditional formatting to FlexGrid upon binding it with Rules Manager
      XAML
      Copy Code 
       <i:Interaction.Behaviors>
      <c1:ConditionalFormattingBehavior Engine="{Binding ElementName=rulesManager, Path=Engine}"/>
  </i:Interaction.Behaviors>
    1. Add C1Expander to wrap the Rules Manager and make it collapsible using the following code
      XAML
      Copy Code 
      <c1:C1Expander Header="RulesManager" ExpandDirection="Left" ExpandIconAlignment="Left" HorizontalContentAlignment="Right" BorderThickness="0" Grid.Column="1">
    <c1:C1RulesManager x:Name="rulesManager" Width="400" RulesVisibility="All">
        <c1:C1RulesManager.Engine>
                                     
        </c1:C1RulesManager.Engine>
    </c1:C1RulesManager>
</c1:C1Expander>
    1. Define the C1RulesEngine inside C1RulesManager
      XAML
      Copy Code 
       <c1:C1Expander Header="RulesManager" ExpandDirection="Left" ExpandIconAlignment="Left" HorizontalContentAlignment="Right" BorderThickness="0" Grid.Column="1">
    <c1:C1RulesManager x:Name="rulesManager" Width="400" RulesVisibility="All">
        <c1:C1RulesManager.Engine>
            <c1:C1RulesEngine>
                                       
            </c1:C1RulesEngine>
        </c1:C1RulesManager.Engine>
    </c1:C1RulesManager>
</c1:C1Expander>
    1. Define the rules using C1RulesEngine
               
      XAML
      Copy Code 
      <c1:C1RulesManager.Engine>
    <c1:C1RulesEngine>
        <c1:RulesEngineCustomRule Func="GetFirstNameStyle" Ranges="[FirstName]"/>
        <c1:RulesEngineSegmentsRule/>
        <c1:RulesEngineExpressionRule Ranges="[OrderCount]" Expression="[OrderCount] &lt; 50">
            <c1:RulesEngineStyle Background="#FFFDE7E9"/>
        </c1:RulesEngineExpressionRule>
        <c1:RulesEngineExpressionRule Ranges="[OrderCount]" Expression="[OrderCount] &gt;= 50">
            <c1:RulesEngineStyle Background="#FFDFF6DD"/>
        </c1:RulesEngineExpressionRule>
        <c1:RulesEngineExpressionRule Ranges="[OrderTotal]" Expression="[OrderTotal] &lt; 5000">
            <c1:RulesEngineStyle Foreground="#FFC42B1C"/>
        </c1:RulesEngineExpressionRule>
        <c1:RulesEngineExpressionRule Ranges="[OrderTotal]" Expression="[OrderTotal] &gt;= 5000">
            <c1:RulesEngineStyle Foreground="#FF0F7B0F"/>
        </c1:RulesEngineExpressionRule>
        
    </c1:C1RulesEngine>
</c1:C1RulesManager.Engine>

    In the example above, the C1Expander containing C1RulesManager applies conditional formatting to the FlexGrid. It uses C1RulesEnginge to style the grid cells based on the conditional formatting that is: rows with OrderCount less than 50 get a light red backcolor while those that are more or equal to 50 get light green color. For OrderTotal values that are less than 5000 gets a dark red forecolor while those that are greater than or equal to 5000 gets dark green color. Additionally, a Custom Rule is defined to style the FirstName column using a user-defined function. This setup helps visually highlight important data patterns for easier analysis.